<template>
  <div class="static">
    <Header title="数据统计">
      <img class="left" @click="back" src="../assets/turn.png" alt />
    </Header>
    <loading  v-if="isflag" />
    <!--整体 -->
    <div>
      <!-- 上半部分  -->
      <div class="old_top">
        <div class="old_flex" @click="cell">
          <p>{{quarters}}</p>
          <img src="../assets/icon_down_white.png" alt />
        </div>
        <p class="old_num">{{list.line}}</p>
        <div class="old_foot">
          <p>授权人数</p>
          <p>更新于2018-09-34 12:35:09</p>
        </div>
      </div>
      <!-- 上半部分  -->

      <!-- 下半部分  -->
      <div class="old_bottom">
        <div class="old_one" @click="search">
          <img class="old_buil" src="../assets/icon_buildings.png" />
          <div class="old_newone">
            <p>房屋管理</p>
            <p>房屋情况一览无余</p>
          </div>
          <p class="old_total">
            {{list.all}}
            <span>套</span>
          </p>
        </div>
        <div class="old_one old_pad">
          <img class="old_buil" src="../assets/icon_no_user.png" />
          <div class="old_newone">
            <p>房屋空置</p>
            <p>快速了解房屋空置</p>
          </div>
          <p class="old_total">
            {{list.Vacant}}
            <span>套</span>
          </p>
        </div>
        <div class="old_one old_pad">
          <img class="old_buil" src="../assets/icon_nothing.png" />
          <div class="old_newone">
            <p>未授权人员</p>
            <p>快速了解未授权人员</p>
          </div>
          <p class="old_total">
            {{list.Offline}}
            <span>人</span>
          </p>
        </div>
      </div>
      <!-- 下半部分  -->
    </div>
    <!--整体 -->
  </div>
</template>

<script>
import Header from "./header";
import { statistic } from "../old_request";
export default {
  data() {
    return {
      quarters: "",
      list: [],
      isflag:true
    };
  },
  components: {
    Header
  },
  methods: {
    back() {
      this.$router.back(); //返回上一页
    },
    cell() {
      this.$router.push("/cell"); //跳转选择小区
    },
    search(){
      this.$router.push('/search'); 
    }
  },
  created() {
    let that = this;
    if(that.$store.state.blockid === null){             //页面刷新后触发 弥补vuex刷新后的数据清空
        that.wrapper.displace(that.$store.state.blockid,'login','item',that);
    }
    if (that.$store.state.unit) {
      that.quarters = that.$store.state.unit;
    }
    let data = {
      sign: that.$md5(`${that.wrapper.globalData()}blockId=${that.$store.state.blockid}timestamp=${that.wrapper.gettime()}`),
      timestamp: that.wrapper.gettime(),
      blockId: that.$store.state.blockid,
      userId: that.$store.state.userid
    };

    statistic(data, that).then(res => {
    //   console.log(res);
      let count = 0;
      let total;
      if (res.code === 0) {
        that.isflag = false;
        res.data.unit.forEach((item, i) => {
          if (res.data.unit[i].count === 0) {
            count++;                            //统计房屋空置有几套
          }
          total = {                                   //重新构造一个对象
            line: res.data.memberTotal,
            Offline: res.data.memberAuth,
            Vacant: count,
            all: res.data.unit.length
          };
        });
        that.list.push(total);                     
        that.list = that.list[0];                    //把结果写入变量
        // console.log(that.list);
      }
    });
  }
};
</script>

<style scoped>
.left {
  position: absolute;
  left: -6px;
  transform: translateY(1px) !important;
  height: 22px !important;
}
.static {
  margin-top: 50px;
}
.old_top {
  height: 230px;
  background: linear-gradient(to right, #128ae7, #12ade7);
}
.old_top .old_flex {
  display: flex;
  justify-content: center;
  padding-top: 15px;
  color: white;
}
.old_top .old_flex img {
  transform: translateY(2px);
}
.old_top .old_num {
  display: flex;
  justify-content: center;
  padding: 40px 0px 30px 0px;
  font-size: 70px;
  color: white;
  box-sizing: border-box;
}
.old_top .old_foot {
  text-align: center;
  color: white;
  padding-top: 10px;
}
.old_foot p:first-child {
  padding-bottom: 8px;
}
.old_bottom {
  margin-top: 15px;
}
.old_bottom .old_one {
  display: flex;
  width: 92%;
  padding: 18px 0px;
  border-radius: 8px;
  margin: 20px auto;
  /* box-shadow: 0px 5px  5px 5px rgb(195, 195,195); */
  box-shadow: 2px 2px 10px rgb(195, 195, 195);
}
.old_one .old_buil {
  padding-left: 15px;
}
.old_one .old_newone {
  flex: 1;
  padding: 7px 0 0 15px;
}
.old_newone p:first-child {
  font-weight: bold;
}
.old_newone p:last-child {
  color: #adadad;
  padding-top: 11px;
  font-size: 14px;
}
.old_total {
  height: 55px;
  line-height: 55px;
  padding-right: 15px;
  font-size: 26px;
}
.old_total span {
  font-size: 16px;
  padding-left: 2px;
}
</style>